import React from 'react';
import PropTypes from 'prop-types';
import s from './ShadeBox.module.css';
import cn from 'classnames';
import SvgIcon from '../SvgIcon/Icon';
export default function bottomBox({ className, bugStore, seebug, account }) {
	const [changHeight, setChangHeight] = React.useState({
		brain: { height: '12.8rem', rotate: 'rotate(180deg)' },
		404: { height: '12.8rem', rotate: 'rotate(180deg)' },
		bug: { height: '12.8rem', rotate: 'rotate(180deg)' },
	});
	const onHeight = e => {
		const changHeight_ = Object.assign({}, changHeight);
		changHeight_[e].height =
			changHeight[e].height === '5rem' ? '12.8rem' : '5rem';
		changHeight_[e].rotate =
			changHeight[e].rotate === 'rotate(180deg)'
				? 'rotate(0deg)'
				: 'rotate(180deg)';
		setChangHeight(changHeight_);
	};
	React.useEffect(() => {}, []);
	return (
		<div className={s.bottomBox}>
			<div className={s.safeBrain} style={{ height: changHeight.brain.height }}>
				<p
					className={s.safeBrainT}
					onClick={() => {
						onHeight('brain');
					}}
				>
					<span className={s.brain0}>
						<SvgIcon name="brain0" />
					</span>
					<SvgIcon name="brain" />
					<span
						className={s.jt}
						style={{ transform: changHeight.brain.rotate }}
					>
						<SvgIcon name="jt" />
					</span>
				</p>
				<p className={s.safeBrainD}>AI+大数据的安全态势生产线</p>
				<p>
					累计超<mark>万亿次</mark>攻防数据
				</p>
				<p>
					持续监测全球<mark>90%</mark>扫描产品
				</p>
				<p>
					拥有<mark>30万</mark>活跃黑客组织最新攻击态势
				</p>
			</div>
			<div
				className={s.safeBrain}
				style={{ height: changHeight['404'].height }}
			>
				<p
					className={s.safeBrainT}
					onClick={() => {
						onHeight('404');
					}}
				>
					<SvgIcon name="404" />
					<span
						className={s.jt}
						style={{ transform: changHeight['404'].rotate }}
					>
						<SvgIcon name="jt" />
					</span>
				</p>
				<p className={s.safeBrainD}>全球知名网络安全团队</p>
				<p>
					CNVD2020年度<mark>最具价值漏洞</mark>
				</p>
				<p>处置应急工作优秀单位</p>
				<p>原创漏洞发现优秀单位</p>
				<p>
					获得<mark>CNVD 14颗星认证</mark>
				</p>
			</div>
			<div className={s.safeBrain} style={{ height: changHeight.bug.height }}>
				<p
					className={s.safeBrainT}
					onClick={() => {
						onHeight('bug');
					}}
				>
					<SvgIcon name="bug" />
					<span className={s.jt} style={{ transform: changHeight.bug.rotate }}>
						<SvgIcon name="jt" />
					</span>
				</p>
				<p className={s.safeBrainD}>国内权威通用漏洞平台</p>
				<p className={s.seebugP}>
					漏洞数：<mark>{seebug.total || '0'}</mark>
					<SvgIcon name="up" />
				</p>
				<p className={cn(s.seebugP, s.seebugP2)}>
					PoC数：<mark>{seebug.has_poc || '0'}</mark>
					<SvgIcon name="up" />
				</p>
			</div>
		</div>
	);
}
bottomBox.propTypes = {
	className: PropTypes.string,
	bugStore: PropTypes.any,
	seebug: PropTypes.any,
	account: PropTypes.any,
};

bottomBox.defaultProps = {
	className: s.chartBox,
	bugStore: { account: 0, names: [] },
};
